<!--
@license
Copyright 2018 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../tf-imports/d3.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-card/paper-card.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../paper-radio-group/paper-radio-group.html">
<link rel="import" href="../paper-slider/paper-slider.html">

<dom-module id='vz-example-viewer'>
  <template>
    <style id="linter-paper-button-style">
      /**
       * This style preserves the styling previous to
       * https://github.com/PolymerElements/paper-button/pull/115
       * This change can break the layout of paper-button content.
       * Remove this style to apply the change, more details at b/70528356.
       */
      paper-button {
        display: inline-block;
        text-align: center;
        font-family: inherit;
      }
    </style>
    <style>
      :host {
        width: 100%;
        font-family: 'Roboto';
      }

      .seq-feat {
        margin-left: 16px;
      }

      .value-list {
        width:100%;
      }

      .value {
        padding: 0 5px;
        /* TODO(jwexler): Determine how to embed in smart engine iron-list of vz-example-viewers
         * without needing this !important. */
        width: 100px !important;
        --paper-input-container: {
          padding: 1px 0 0 0;
        };
        --paper-input-container-underline: {
          display: none;
        };
      }

      .slider-holder {
        display: flex;
      }

      .slider-label {
        margin-right: 10px;
        margin-top: 16px;
      }

      #saliencyLegend {
        width: 300px;
        height: 50px;
        margin-left: 8px;
        margin-right: 8px;
      }

      .saliency-controls-holder {
        display: block;
        padding: 8px;
        width: fit-content;
      }

      .hide-saliency-controls {
        display: none;
      }

      .outer {
        border: 1px solid rgba(61,140,207,.3);
        margin: 5px;
        padding: 5px;
      }

      .image {
        /* <img> elements are used to load to a canvas so they aren't displayed. */
        display: none;
      }

      .flex-controls {
        display: flex;
        flex-wrap: wrap;
        max-height: 100px;
        overflow: auto;
      }

      .value-pill {
        display: flex;
        border-radius: 18px;
        background: lightgrey;
        margin: 0 8px 8px 0;
      }

      .feature-name {
        margin-bottom: 5px;
      }

      .slider {
        --paper-slider-input: {
          width: 100px
        }
      }

      .hide-controls {
        display: none;
      }

      .indent {
        margin-left: 16px;
      }

      .scale-label {
        margin-top: 10px;
        margin-right: 10px;
      }

      .windowing-label {
        width: 110px;
      }

      .control-toggle-button {
        float: left;
        max-height: 20px;
        max-width: 20px;
        padding: 0;
      }

      .expand-button-holder {
        margin-bottom: 10px;
      }

      .delete-value-button {
        max-width: 20px;
        max-height: 20px;
        padding: 0;
        margin-top: 2px;
      }

      .delete-feature-button {
        max-height: 15px;
        max-width: 15px;
        padding: 0;
        margin-left: 5px;
        margin-top: 1px;
      }

      .add-value-button {
        margin-top: 2px;
        max-height: 20px;
        max-width: 20px;
        padding: 0;
      }

      .add-feature-button {
        margin-left: 0;
        margin-bottom: 10px;
      }

      .imagecard {
        padding: 8px;
        margin-bottom: 5px;
      }

      .image-scale-button {
        margin-bottom: 5px;
      }

      .saliency-legend-label {
        margin-bottom: 5px;
      }
    </style>
    <div class="outer">
      <div>
        <template is="dom-repeat" items="[[featuresList]]" as="feat">
          <div class="flex-controls feature-name">
            <div>[[feat.name]]</div>
            <paper-icon-button data-feature="[[feat.name]]"
                                icon="remove-circle-outline"
                                on-click="deleteFeature"
                                class$="[[getDeleteFeatureButtonClass(readonly)]]">
            </paper-icon-button>
          </div>
          <template is="dom-if" if="[[isImage(feat.name)]]">
            <paper-card class="imagecard">
              <img class="image" src="[[getImageSrc(feat.name)]]"
                    id="[[getImageId(feat.name)]]"></img>
              <canvas id="[[getCanvasId(feat.name)]]" data-feature="[[feat.name]]"></canvas>
              <template is="dom-if" if="[[shouldShowImageControls(hasImage, allowImageControls)]]">
                <div>Image windowing (contrast)</div>
                <div class="slider-holder indent">
                  <div class="slider-label windowing-label">Window center:</div>
                  <paper-slider class="slider" editable=true  max="255"
                                immediate-value="{{windowCenter}}" value="[[windowCenter]]">
                  </paper-slider>
                </div>
                <div class="slider-holder indent">
                  <div class="slider-label windowing-label">Window width:</div>
                  <paper-slider class="slider" editable=true  max="512" min="1"
                                immediate-value="{{windowWidth}}" value="[[windowWidth]]">
                  </paper-slider>
                </div>
                <div class="flex-controls">
                  <div class="scale-label">Image scale percentage:</div>
                  <paper-input no-label-float type="number" min="10" max="500"
                                value="{{imageScalePercentage}}">
                  </paper-input>
                  <paper-button raised on-click="updateImages" class="image-scale-button">
                    set
                  </paper-button>
                </div>
              </template>
            </paper-card>
          </template>
          <template is="dom-if" if="[[!isImage(feat.name)]]">
            <div class="flex-controls">
              <template is="dom-repeat" items="[[getFeatureValues(feat.name)]]" as="value">
                  <div class$="[[getInputPillClass(feat.name)]]">
                    <paper-icon-button data-feature="[[feat.name]]" data-index="[[index]]"
                                        icon="remove-circle-outline"
                                        on-click="deleteValue"
                                        class$="[[getDeleteValueButtonClass(readonly)]]">
                    </paper-icon-button>
                    <paper-input class$="[[getInputClass(feat.name)]]" value="[[value]]"
                                  prevent-invalid-input allowed-pattern="[[getInputPattern(feat.name)]]"
                                  no-label-float readonly="[[readonly]]"
                                  data-feature="[[feat.name]]"
                                  data-index="[[index]]"
                                  on-input="onValueChanged">
                    </paper-input>
                  </div>
                </template>
              <paper-icon-button data-feature="[[feat.name]]" icon="add-circle-outline" on-click="addValue"
                                  class$="[[getAddValueButtonClass(readonly)]]">
              </paper-icon-button>
            </div>
          </template>
        </template>
        <template is="dom-if" if="[[isSeqExample(maxSeqNumber)]]">
          <div class="slider-holder">
            <div class="slider-label">Sequence Number:</div>
            <paper-slider class="slider" editable=true max="[[maxSeqNumber]]" value="{{seqNumber}}">
            </paper-slider>
          </div>
          <template is="dom-repeat" items="[[seqFeaturesList]]" as="seqfeat">
            <div class="seqfeat">
              <div class="flex-controls feature-name">
                <div>[[seqfeat.name]]</div>
                <paper-icon-button data-feature="[[seqfeat.name]]"
                                    icon="remove-circle-outline"
                                    on-click="deleteFeature"
                                    class$="[[getDeleteFeatureButtonClass(readonly)]]">
                </paper-icon-button>
              </div>
              <template is="dom-if" if="[[isImage(seqfeat.name)]]">
                <img class="image" src="[[getSeqImageSrc(seqfeat.name, seqNumber)]]"
                      id="[[getImageId(seqfeat.name)]]"></img>
                <canvas id="[[getCanvasId(seqfeat.name)]]"
                        data-feature="[[seqfeat.name]]"
                        data-seq-num="[[seqNumber]]"></canvas>
                <template is="dom-if" if="[[shouldShowImageControls(hasImage, allowImageControls)]]">
                  <div class="image-controls">
                    <div>Image windowing (contrast)</div>
                    <div class="slider-holder indent">
                      <div class="slider-label windowing-label">Window center:</div>
                      <paper-slider class="slider" editable=true  max="255"
                                    immediate-value="{{windowCenter}}" value="[[windowCenter]]">
                      </paper-slider>
                    </div>
                    <div class="slider-holder indent">
                      <div class="slider-label windowing-label">Window width:</div>
                      <paper-slider class="slider" editable=true  max="512" min="1"
                                    immediate-value="{{windowWidth}}" value="[[windowWidth]]">
                      </paper-slider>
                    </div>
                    <div class="flex-controls">
                      <div class="scale-label">Image scale percentage:</div>
                      <paper-input no-label-float type="number" min="10" max="500"
                                    value="{{imageScalePercentage}}">
                      </paper-input>
                      <paper-button raised on-click="updateImages" class="image-scale-button">
                        set
                      </paper-button>
                    </div>
                  </div>
                </template>
              </template>
              <template is="dom-if" if="[[!isImage(seqfeat.name)]]">
                <div class="flex-controls">
                  <template is="dom-repeat"
                            items="[[getSeqFeatureValues(seqfeat.name, seqNumber)]]"
                            as="seqvalue">
                    <div class$="[[getInputPillClass(seqfeat.name)]]">
                      <paper-icon-button data-feature="[[seqfeat.name]]" data-index="[[index]]"
                                          data-seq-num="[[seqNumber]]" icon="remove-circle-outline"
                                          on-click="deleteValue"
                                          class$="[[getDeleteValueButtonClass(readonly)]]">
                      </paper-icon-button>
                      <paper-input class$="[[getInputClass(seqfeat.name)]]"
                                    value="[[seqvalue]]"
                                    prevent-invalid-input
                                    allowed-pattern="[[getInputPattern(seqfeat.name)]]"
                                    no-label-float readonly="[[readonly]]"
                                    on-input="onValueChanged"
                                    data-feature="[[seqfeat.name]]"
                                    data-index="[[index]]"
                                    data-seq-num="[[seqNumber]]">
                      </paper-input>
                    </div>
                  </template>
                  <paper-icon-button data-feature="[[seqfeat.name]]" data-seq-num="[[seqNumber]]"
                                      icon="add-circle-outline" on-click="addValue"
                                      class$="[[getAddValueButtonClass(readonly)]]">
              </paper-icon-button>
                </div>
              </template>
            </div>
          </template>
        </template>
        <paper-button raised on-click="openAddFeatureDialog"
                      class$="[[getAddFeatureButtonClass(readonly)]]">
          Add Feature
        </paper-button>
        <paper-card class$="[[getSaliencyControlsHolderClass(saliency)]]">
          <div class="saliency-legend-label">Saliency legend</div>
          <div class="flex-controls">
            <svg id="saliencyLegend"></svg>
            <paper-checkbox id="salCheckbox" checked on-change="showSalCheckboxChange">
              Show saliency
            </paper-checkbox>
          </div>
          <div class="flex-controls">
            <div class="slider-label">Saliency cutoff %</div>
            <paper-slider class="slider" editable=true immediate-value="{{saliencyCutoff}}"
                          value="[[saliencyCutoff]]">
            </paper-slider>
          </div>
        </paper-card>
      </div>
    </div>
    <paper-dialog id="addFeatureDialog">
      <h2>Add Feature</h2>
      <paper-input label="Feature name" value="{{newFeatureName}}"></paper-input>
      <paper-radio-group selected="{{newFeatureType}}">
        <paper-radio-button name="int">Int</paper-radio-button>
        <paper-radio-button name="float">Float</paper-radio-button>
        <paper-radio-button name="bytes">Bytes</paper-radio-button>
      </paper-radio-group>
      <paper-button dialog-dismiss raised on-click="addFeature"
                    disabled="[[!shouldEnableAddFeature(newFeatureName)]]">
        Create
      </paper-button>
    </paper-dialog>
  </template>
  <script src="vz-example-viewer.js"></script>
</dom-module>
